<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        if(window.innerWidth<=768){
            document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 375) * 100 + "px";
        }else{
            document.getElementsByTagName("html")[0].style.fontSize = 100+"px";
        }
    </script>
    <link rel="stylesheet" href="./css/移动端适配.min.css">
</head>

<body>
    <div class="box"></div>
    <script>
        window.onload = function(){
            window.addEventListener('resize', resize, false);
            function resize(){
                if(window.innerWidth<=768){
                    document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 375) * 100 + "px";
                }else{
                    document.getElementsByTagName("html")[0].style.fontSize = 100+"px";
                }
                document.body.style.fontSize = 16 + "px";
            }
            var box = document.querySelector(".box");
            for(var i = 0;i<10;i++){
                var item = document.createElement("div");
                item.classList.add("item");
                item.innerHTML = 
                `<div>
                    <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png" alt="">
                </div>
                <div>京东超市</div>`;
                box.appendChild(item);
            }
        }
    </script>
</body>

</html>